<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>福田区</title>
	<link rel="stylesheet" type="text/css" href="cs/index.css">
	<link rel="stylesheet" type="text/css" href="cs/terminal.css">
	<script src="lib/jquery.js"></script>
	<script src="lib/echarts.min.js"></script>
	<script src="lib/bmap.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=N2SUrQBNFOvHgkW6CffrXHl1rmuWGnoS"></script>
    <script src="js/index.js"></script>
<script>
	pageFlex(2);    //页面适配处理
</script>	
</head>
<body>
	<!-- 底层动画 -->
	<div class="movemain">
		<img src="images/move.png" class="bgimg1">
		<img src="images/a.png" class="bgimg2">
	</div>	
    <!-- 内容区 -->
	<div class="container" id="container">
		<!-- 头部 -->
		<div class="header">
			<div class="head_left">
				<span id="top_time">11 : 20 : 55</span>
				<span id="top_date">星期三 2018年4月25</span>
			</div>
			<div class="head_center">
				<h1>福田区政务服务大数据挖掘分析平台<span id="head_child" style="font-size: 0.26rem;"></span></h1>
			</div>
			<div class="head_right">
				<button onclick="location.href='home.html'">大厅主页</button>
				<button class="head_act">自助终端</button>
			</div>
		</div>
		<!-- 数据区 -->
		<div class="body">

			<!-- tem1 -->
			<div class="temp tem1">
				<div class="temp_move_btn"></div>
				<div class="temp_content ZDNUM">
					<div class="ZDNUM_total">
						<span>110台</span><br>全区设备总数
					</div>
					<div class="ZDNUM_map1"></div>
					<div class="ZDNUM_mark">
						<span class="mark_left">正常</span>
						<span class="mark_center">异常</span>
						<span class="mark_right">停机</span>
					</div>
					<div class="ZDNUM_tip">
						设备事项数 <span>140个</span>
					</div>
					<div class="ZDNUM_map2"></div>
				</div>
			</div>
			<!-- tem2 -->
			<div class="temp tem2 ZDtoMAP_temp" scale="1">
				<div class="ZDtoMAP_topbar">
			
					筛选 
					<select class="state_select">
						<option value="">全部</option>
						<option value="正常">正常</option>
						<option value="异常">异常</option>
						<option value="缺纸">缺纸</option>
						<option value="缺墨">缺墨</option>
					</select>
			
					<div class="map_btns">
						<button class="map_pos_btn"></button>
						<button class="map_big"></button>
						<button class="map_small"></button>
					</div>

					地区
					<select class="area_select1">
						<option value="">请选择</option>
					</select>
					<select class="area_select2">
						<option value="">请选择</option>
					</select>

					机器编码 <input type="text" class="m_code"/>

					<button class="m_submit">搜索</button>
					<button class="m_clear">清除</button>
					<div class="temp_move_btn"></div>
				</div>
				<div class="temp_content ZDtoMAP">
					<div class="ZDtoMAP_map" id="ZDtoMAP_map"></div>
				</div>
			</div>
			<!-- tem3 -->
			<div class="temp tem3">
				<div class="temp_title">热门终端设备TOP5</div>
				<div class="temp_move_btn"></div>
				<div class="temp_content RMZDSBTOP5">
					<div class="RMZDSBTOP5_topbar">
						<button class="left_btn active">查询类</button>
						<button class="center_btn">预约类</button>
						<button class="right_btn">申办类</button>
					</div>
					<div class="map_box">
						<div class="RMZDSBTOP5_map"></div>
					</div>
				</div>
			</div>

			<!-- tem4 -->
			<div class="temp tem4">
				<div class="temp_title">热门业务事项TOP5</div>
				<div class="temp_move_btn"></div>
				<div class="temp_content RMYWSXTOP5">
					<div class="RMYWSXTOP5_topbar">
						<button class="left_btn active">查询类</button>
						<button class="center_btn">预约类</button>
						<button class="right_btn">申办类</button>
					</div>
					<div class="map_box">
						<div class="RMYWSXTOP5_map"></div>
					</div>
				</div>
			</div>

			<!-- tem5 -->
			<div class="temp tem5 YWZL_temp">
				<div class="temp_move_btn"></div>
				<div class="temp_content YWZL">
					<div class="YWZL_total">
						<span>23614笔</span><br>业务总量
				    </div>
				    <div style="padding: 0.1rem;height: 100%;">
				    	<div class="YWZL_map"></div>
				    </div>
				</div>
			</div>

			<!-- tem6 -->
			<div class="temp tem6 temp_YJLB">
				<div class="temp_title">预警列表</div>
				<div class="temp_move_btn"></div>
				<div class="temp_content YJLB">
					<ul class="YJLB_title">
						<li>设备名称</li>
						<li>设备编码</li>
						<li>剩余纸张</li>
					</ul>
					<ul class="YJLB_items">
						<li>
							<span>华强北</span>
							<span>ZSFSDG12345698745</span>
							<span>123</span>
						</li>
					</ul>
				</div>
			</div>

			<!-- 遮罩 -->
			<div class="zhezhao"></div>
		</div>
	</div>
</body>
</html>
<script src="js/data.js"></script>
<script src="js/terminal.js"></script>
<script src="js/test1.js"></script>
<!-- <script src="js/test2.js"></script> -->
<script>
//终端状态饼图
var data = [
	{value: 60, name: '正常', itemStyle: {color: '#5DFC9D'}},
	{value: 32, name: '异常', itemStyle: {color: '#FFBC47'}},
	{value: 28, name: '停机', itemStyle: {color: '#FCF75D'}}
]
$.ZDNUM_map1($(".ZDNUM_map1")[0], data)


//设备事项数，横柱图
var data = {
    name:["查询类","预约类","申办类"],
    value:[55, 35, 30]
}
$.ZDNUM_map2($(".ZDNUM_map2")[0], data)


//热门终端TOP5, 柱状图
var data = {
    name: ['终端1', '终端2', '终端3', '终端4', '终端5'],
    value: [320, 200, 150, 80, 70]
}
$.RMZDSBTOP5_map($(".RMZDSBTOP5_map")[0], data);
$(".RMZDSBTOP5_topbar").find("button").click(function(){ //选项点击
	var index = $(this).index();
	$(this).siblings().removeClass("active");
	$(this).addClass("active");

	console.log(index)
	//其他操作
	var data = {
	    name: ['终端1', '终端2', '终端3', '终端4', '终端5'],
	    value: [SJ(300,10,1) , SJ(260,40,1), SJ(220,40,1), SJ(200,20,1), SJ(150,50,1)]
	}
	$.RMZDSBTOP5_map($(".RMZDSBTOP5_map")[0], data);
})


//热门事项TOP5, 柱状图
var data = {
    name: ['事项1', '事项2', '事项3', '事项4', '事项5'],
    value: [320, 200, 150, 80, 70]
};
$.RMYWSXTOP5_map($(".RMYWSXTOP5_map")[0], data);
$(".RMYWSXTOP5_topbar").find("button").click(function(){  //选项点击
	var index = $(this).index();
	$(this).siblings().removeClass("active");
	$(this).addClass("active");

	console.log(index)
	var data = {
	    name: ['事项1', '事项2', '事项3', '事项4', '事项5'],
	    value: [SJ(200,10,1) , SJ(180,20,1), SJ(140,40,1), SJ(120,20,1), SJ(100,20,1)]
	};
	$.RMYWSXTOP5_map($(".RMYWSXTOP5_map")[0], data);
})


//总业务量, 柱状图
var data = {
    name: ['事项1', '事项2', '事项3', '事项4', '事项5'],
    value: [320, 200, 150, 80, 70]
};
$.YWZL_map($(".YWZL_map")[0], data);


//预警列表渲染和自动滚动
var YJLB_items = [];
for(var i=0;i<15;i++){
	YJLB_items.push(`
		<li>
			<span>华强北</span>
			<span>ZSFSDG12345698745</span>
			<span>123</span>
		</li>
	`)
}
$(".YJLB_items").html(YJLB_items.join(''))		

//滚动
setInterval(function(){
	addItem('ul.YJLB_items');
},3000)

</script>